<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手动触发键盘事件</title>
    <script src="./lib/tinymce/tinymce.min.js"></script>
    <script>
      tinymce.init({
        selector: "#tinymce",
        language: "zh-Hans",
        plugins: `advlist autoresize code emoticons image link nonbreaking quickbars table visualchars anchor autosave codesample fullscreen importcss lists pagebreak save template wordcount autolink charmap directionality help insertdatetime media preview searchreplace visualblocks`,
        skin: "tinymce-5",
        content_css: "tinymce-5-dark",
        toolbar:
          "undo redo | styles bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
      });
    </script>
  </head>
  <body>
    <h2>手动触发键盘事件</h2>
    <textarea id="tinymce">
      <pre>
        function fireKeyEvent(element, evtType, keyChar) {
        element.focus();
        var KeyboardEventInit = {
          key: keyChar,
          code: "",
          location: 0,
          repeat: false,
          isComposing: false,
        };
        var evtObj = new KeyboardEvent(evtType, KeyboardEventInit);
        element.dispatchEvent(evtObj);
      }
      function onDown(e) {
        document.body.dispatchEvent(
          new KeyboardEvent("keydown", {
            key: "End",
            code: "End",
            location: 0,
            keyCode: 35,
            repeat: false,
            isComposing: false,
            isTrusted: true,
          }),
        );
      }
      function onUp(e) {
        document.body.dispatchEvent(
          new KeyboardEvent("keydown", {
            key: "Home",
            code: "Home",
            keyCode: 36,
            location: 0,
            repeat: false,
            isComposing: false,
            isTrusted: true,
          }),
        );
      }
      var objInput = document.getElementById("input_username");
      objInput.addEventListener(
        "keydown",
        function (e) {
          objInput.value += e.key;
        },
        false,
      );
      document.body.addEventListener("keydown", (e) => {
        console.log(e);
      });
      fireKeyEvent(objInput, "keydown", "a");
      // targetElement.dispatchEvent(new KeyboardEvent('keypress'))
      // Home 36 End 35
      </pre>
    </textarea>
    <!-- 定义事件 -->
    <button id="downBtn" onclick="onDown(this)">down</button>
    <div style="height: 300vh">1</div>
    <input id="input_username" />
    <button onclick="onUp(this)">up</button>
    <script type="text/javascript">
      function fireKeyEvent(element, evtType, keyChar) {
        element.focus();
        var KeyboardEventInit = {
          key: keyChar,
          code: "",
          location: 0,
          repeat: false,
          isComposing: false,
        };
        var evtObj = new KeyboardEvent(evtType, KeyboardEventInit);
        element.dispatchEvent(evtObj);
      }
      function onDown(e) {
        document.body.dispatchEvent(
          new KeyboardEvent("keydown", {
            key: "End",
            code: "End",
            location: 0,
            keyCode: 35,
            repeat: false,
            isComposing: false,
            isTrusted: true,
          }),
        );
      }
      function onUp(e) {
        document.body.dispatchEvent(
          new KeyboardEvent("keydown", {
            key: "Home",
            code: "Home",
            keyCode: 36,
            location: 0,
            repeat: false,
            isComposing: false,
            isTrusted: true,
          }),
        );
      }
      var objInput = document.getElementById("input_username");
      objInput.addEventListener(
        "keydown",
        function (e) {
          objInput.value += e.key;
        },
        false,
      );
      document.body.addEventListener("keydown", (e) => {
        console.log(e);
      });
      fireKeyEvent(objInput, "keydown", "a");
      // targetElement.dispatchEvent(new KeyboardEvent('keypress'))
      // Home 36 End 35
    </script>
    <!-- <script type="text/javascript" charset="utf-8"  src="./lib/L2Dwidget.0.min.js"></script>
    <script type="text/javascript" charset="utf-8"  src="./lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        L2Dwidget.init({"display": {
            "superSample": 2,
            "width": 200,
            "height": 400,
                 "position": "right",
                     "hOffset": 0,
            "vOffset": 0
              }
         });
    </script> -->
  </body>
</html>
